<template>
  <div>
    <div @click="errMsgShow=false" style="margin-top:20px;margin-bottom:80px;text-align:left;">
      <h5>#第三部分#</h5>
      <p>请把你自己最想干的3种工作或想读的专业按顺序写下来，并说明理由，根据其在你心中的清晰程度或具体程度，用数字1-5来表示：</p>
      <div>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text">职业1</span>
          </div>
          <input type="text" class="form-control" v-model="part1[0].text" />
          <div class="input-group-prepend">
            <span class="input-group-text">清晰度</span>
          </div>
          <select class="form-control" v-model="part1[0].value">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </div>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text">理由</span>
          </div>
          <input type="text" class="form-control" v-model="part1[0].detail" />
        </div>
      </div>
      <br />
      <div>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text">职业2</span>
          </div>
          <input type="text" class="form-control" v-model="part1[1].text" />
          <div class="input-group-prepend">
            <span class="input-group-text">清晰度</span>
          </div>
          <select class="form-control" v-model="part1[1].value">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </div>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text">理由</span>
          </div>
          <input type="text" class="form-control" v-model="part1[1].detail" />
        </div>
      </div>
      <br />
      <div>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text">职业3</span>
          </div>
          <input type="text" class="form-control" v-model="part1[2].text" />
          <div class="input-group-prepend">
            <span class="input-group-text">清晰度</span>
          </div>
          <select class="form-control" v-model="part1[2].value">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </div>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text">理由</span>
          </div>
          <input type="text" class="form-control" v-model="part1[2].detail" />
        </div>
      </div>
      <hr />
      <p>请在下面选择出你选择工作时会考虑的因素：</p>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">最重要</span>
        </div>
        <select class="form-control" v-model="part2[0]">
          <option v-for="(item,key) in part2_strings" :key="item.id" :value="key">{{item}}</option>
        </select>
      </div>

      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">次重要</span>
        </div>
        <select class="form-control" v-model="part2[1]">
          <option v-for="(item,key) in part2_strings" :key="item.id" :value="key">{{item}}</option>
        </select>
      </div>

      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">次不重要</span>
        </div>
        <select class="form-control" v-model="part2[2]">
          <option v-for="(item,key) in part2_strings" :key="item.id" :value="key">{{item}}</option>
        </select>
      </div>

      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">最不重要</span>
        </div>
        <select class="form-control" v-model="part2[3]">
          <option v-for="(item,key) in part2_strings" :key="item.id" :value="key">{{item}}</option>
        </select>
      </div>
    </div>
    <br />
    <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
      <a class="navbar-brand" v-show="!errMsgShow">霍兰德测试</a>
      <span class="navbar-text text-danger" v-show="errMsgShow">
        <b>错误：</b>
        {{errMsg}}
      </span>
    </nav>
    <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-bottom">
      <span class="navbar-text" style="color:lightgrey">成都终端管制室 创新工作室 2021</span>
      <ul class="navbar-nav">
        <li class="nav-item">
          <button type="button" class="btn btn-primary" @click="verifyData()">下一步</button>
        </li>
      </ul>
    </nav>
    <!-- <button type="button" class="btn btn-primary" @click="verifyData()">下一步</button> -->
  </div>
</template>

<script>
export default {
  name: "HollandInoutView",
  data() {
    return {
      errMsgShow: false,
      errMsg: "",
      part1: [
        { text: "", value: 0, detail: "" },
        { text: "", value: 0, detail: "" },
        { text: "", value: 0, detail: "" }
      ],
      part2: [-1, -1, -1, -1],
      part2_strings: [
        "工资高、福利好",
        "工作环境(物质方面)舒适",
        "人际关系良好",
        "工作稳定有保障",
        "能提供较好的受教育机会",
        "有较高的社会地位",
        "工作不太紧张、外部压力少",
        "能充分发挥自己的能力特长",
        "社会需要与社会贡献大"
      ]
    };
  },
  computed: {
    devMode() {
      return this.$store.state.devMode;
    }
  },
  methods: {
    commitData() {
      this.$store.commit("setValueHolland", {
        part: "inputs",
        content: [this.part1, this.part2]
      });
      if (this.devMode) {
        window.console.clear();
        window.console.log(
          JSON.stringify(this.$store.state.hollandData.scoreData)
        );
        window.console.log("HollandInputView: Data committed.");
      }
      this.goNext();
      //this.$router.push("hollandfinal");
    },
    /*
    findIndex(str, arr) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] == str) {
          return i;
        }
      }
      return -1;
    },
    */
    goNext() {
      this.$store.commit("routerNext");
      this.$router.push(this.$store.state.routerData.nextView);
      if (this.devMode) {
        window.console.log(this.$store.state.routerData.nextView);
      }
    },
    verifyData() {
      if (this.isEmpt(this.part1) || this.isEmpt2(this.part2)) {
        this.errMsgShow = true;
        this.errMsg = "信息填写不完整!";
        //alert("信息填写不完整!");
        return false;
      }
      if (this.isDup(this.part2)) {
        this.errMsgShow = true;
        this.errMsg = "信息填写重复!";
        //alert("信息填写重复!");
        return false;
      }
      this.commitData();
      return true;
    },
    isDup(ary) {
      let nary = ary.slice().sort();
      for (let i = 0; i < ary.length; i++) {
        if (nary[i] == nary[i + 1]) {
          return true;
        }
      }
      return false;
    },
    isEmpt(arr) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].value == 0 || arr.text == "" || arr.detal == "") {
          return true;
        }
      }
      return false;
    },
    isEmpt2(arr) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] == -1) {
          return true;
        }
      }
      return false;
    },
    test() {
      window.console.log(this.part1);
      window.console.log(this.part2);
    },
    setDefaultValue() {
      this.part1 = [
        { text: "a", value: 1, detail: "......" },
        { text: "b", value: 3, detail: "......" },
        { text: "c", value: 5, detail: "......" }
      ];
      this.part2 = [0, 1, 2, 3];
    }
  },
  mounted() {
    if (this.devMode) {
      this.setDefaultValue();
    }
  }
};
</script>

<style scoped>
select {
  border: 1px solid lightgrey;
  border-radius: 10px;
}
</style>